<!-- Author: Edwin -->
<template>
  <el-dialog :visible.sync="dialogStatus"
             :title="$t('custom.dataset.publishbtn')"
             :modal='true'
             :before-close='beforeCloseDialog'
             width="60%"
             append-to-body>
    <el-card shadow='never'>
      <el-form label-width="120px">
        <el-form-item label="All Tenant: ">
          <el-switch v-model="allTenant"></el-switch>
        </el-form-item>
        <el-form-item v-if="!allTenant"
                      label="Choose Tenant: ">
          <el-select v-model="selectedTenant"
                     multiple
                     v-loading="loading"
                     collapse-tags
                     filterable
                     clearable
                     default-first-option>
            <el-option v-for="item in tenantList"
                       :key="item.tenantCode"
                       :label="item.tenantName"
                       :value="item.tenantCode"></el-option>
          </el-select>
          <div style="marginBottom:10px;"></div>
          <el-tag v-for="its in selectedTenant"
                  :key="its"
                  style="margin:0 10px 10px 0;"
                  closable
                  @close="clearSelectTenant(its)">{{ getTenantName(its) }}</el-tag>
        </el-form-item>
      </el-form>
    </el-card>
    <span slot="footer"
          class="dialog-footer">
      <el-button size="small"
                 @click="closeDialog">{{ $t('custom.cancel') }}</el-button>
      <el-button size="small"
                 type="primary"
                 @click="publishBot">{{ $t('custom.dataset.publishbtn') }}</el-button>
    </span>
  </el-dialog>
</template>

<script>

export default {
  data () {
    return {
      dialogStatus: false,
      botId: null,
      tenantList: [],
      allTenant: false,
      selectedTenant: [],
      loading: false
    }
  },
  methods: {
    publishBot () {
      const params = {
        botId: this.botId,
        allTenant: this.allTenant,
        tenantList: this.selectedTenant
      }
      this.$interface.bots.publishBotApi(params)
        .then(({ data: res }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.$message.success(res.msg)
          this.closeDialog()
        })
        .catch(() => { })
    },
    getTenantList () {
      this.loading = true
      const params = {
        status: 1
      }
      this.$interface.system.getClientList(params)
        .then(({ data: res }) => {
          this.loading = false
          if (res.code !== 0) {
            return this.$message.error(res.msg)
          }
          this.tenantList = res.data
        })
    },
    getTenantName (tenantCode) {
      return this.tenantList.find(e => e.tenantCode === tenantCode).tenantName
    },
    clearSelectTenant (tenantCode) {
      let index = this.selectedTenant.indexOf(tenantCode)
      this.selectedTenant.splice(index, 1)
    },
    openDialog (botId) {
      this.dialogStatus = true
      this.botId = botId
      this.getTenantList()
    },
    closeDialog () {
      this.dialogStatus = false
      this.beforeCloseDialog()
    },
    beforeCloseDialog () {
      Object.assign(this.$data, this.$options.data())
    }
  }
}
</script>

<style scoped>
</style>
